<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="wed, 26 Feb 1997 08:21:57 GMT">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/goodsDetails.css">
    <link rel="stylesheet" href="css/waitingPay.css">
</head>
<body>
<nav class="shop"><img class="inline-block" src="img/banner.png"></nav>
<article class="shop_info">
    <div class="list">
        <ul>
            <li class="blank margin-bottom-5"><sup>┎</sup><span>陈皮</span><sub>┛</sub><span>新会6年陈皮</span></li>
            <li class="buy"><span class="pink inline-block">￥<span class="inline-block">59</span></span><span class="shopping inline-block"><img src="img/bug.png"><sup class="add inline-block">+</sup></span></li>
        </ul>
    </div>
    <p class="postage"><span>√</span>邮费：10:00元（满100包邮）</p>
    <p class="weight"><span>2kg</span><span class="active_span">500kg</span></p>
    <div class="goods_reputation">
        <p class="reputation"><span class="inline-block">好评晒单</span><span class="inline-block">好评率<span>100%</span>&nbsp;&nbsp;<span></span><span>3</span>人评论</span><span class="inline-block"><img class="inline-block" src="img/right.png"></span></p>
        <div class="goods_list">
            <p class="inline-block person_img"><img src="img/people.png"></p>
            <ul class="inline-block">
                <li>12345677</li>
                <li>2015-02-14 09:34</li>
            </ul>
            <p class="service">服务真的很好</p>
        </div>
        <div class="goods_list">
            <p class="inline-block person_img"><img src="img/people.png"></p>
            <ul class="inline-block">
                <li>12345677</li>
                <li>2015-02-14 09:34</li>
            </ul>
            <p class="service">服务真的很好</p>
        </div>
    </div>

    <section class="goods_detail">
        <p class="details"><span class="active">商品详情</span><span>本店成交</span></p>
        <div class="details_any">
            <h5>6年陈皮，新会独特的味道</h5>
            <ul>
                <li>市场上的老陈皮真假岸边，和以往一样，只好到达新会，找到他真正的味道。</li>
                <li><img src="img/ginseng_0.png"></li>
                <li><img src="img/ginseng_1.png"></li>
                <li class="ginseng padding-bottom-5"><span><img class="inline-block" src="img/ginseng_2.png"></span><span><img class="inline-block" src="img/ginseng_3.png"></span></li>
                <li>做陈皮的柑橘叫茶枝柑，是600多年的老品种，果皮易剥。果实的成熟期却很长，从重阳节一直离导冬至，从青柑导黄柑，冬至后是大红柑。青柑多用来入药，甜份低，陈化后药箱明显。</li>
            </ul>
        </div>
        <div style="display: none;" class="details_us">
            <table>
                <tr>
                    <th>买家</th>
                    <th>成交时间</th>
                    <th>购买数量</th>
                </tr>
                <tr>
                    <td>wei*</td>
                    <td>03-20 12:34:23</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>wei*</td>
                    <td>03-20 12:34:23</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>wei*</td>
                    <td>03-20 12:34:23</td>
                    <td>2</td>
                </tr>
            </table>
        </div>
        <p class="relation"><button>联系客服</button></p>
        <p class="drag">———已到底啦———</p>
    </section>

</article>
<footer class="goods">
    <p><button class="inline-block add_buy">立即购买</button><button class="inline-block add_cart">加入购物车</button></p>
</footer>

<!--遮罩效果-->
<div id="back" class="back"></div>
<section class="purchase">
    <div>
        <span class="close">x</span>
        <p class="inline-block"><img class="inline-block border-5" src="img/product_0.png"></p>
        <ul class="inline-block">
            <li class="blank margin-bottom-5"><sup>┎</sup><span>03年撒种</span><sub>┛</sub><span>林下参 自用</span></li>
            <li class="pink buy">￥<span class="inline-block">59</span></li>
        </ul>
    </div>
    <div class="goods_details">
        <p class="weight_1">分类</p>
        <p class="classify"><span>常规播种</span><span class="margin-left-10 active">绿色栽培</span><span class="margin-left-10">纯正野生</span></p>
        <p class="weight_1">年限</p>
        <p class="years"><span>3年</span><span class="margin-left-10 active">5年</span><span class="margin-left-10">7年</span></p>
    </div>
    <div>
        <p class="inline-block addInfo"><span class="inline-block plus">-</span><input type="text" class="inline-block num" value="2"><span class="inline-block add">+</span></p>
    </div>
    <footer class="buy_button"><button class="border-7">购买</button></footer>
</section>
<!--选择收货地址-->
<section class="address">
    <div>
        <p class="select_add">选择收货地址</p>
        <span class="close_1">x</span>
        <ul style="border-bottom: 1px solid #e7e7e7;" class="padding-bottom-10">
            <li class="inline-block"><img src="img/rightOk.png"></li>
            <li class="inline-block">
                <p>1301333333</p>
                <p>北京市朝阳区</p>
            </li>
            <li class="inline-block"><img src="img/edit.png"></li>
        </ul>
        <ul class="margin-top-5">
            <li class="inline-block"><img src="img/addAddress.png"></li>
            <li class="inline-block new_address">新增地址</li>
            <li class="inline-block right_info"><img src="img/right_1.png"></li>
        </ul>
    </div>
</section>
<!--添加收货地址-->
<div class="waitingPay">
    <article id="waitingPay" class="waitingPay">收货地址<span class="close_pay">X</span></article>
    <table>
        <tr>
            <td class="firstTd">收货人</td>
            <td class="firstTd"><input  type="text" class="inputStyle" placeholder="名字"></td>
        </tr>
        <tr>
            <td>联系电话</td>
            <td><input type="text" class="inputStyle" placeholder="联系电话"></td>
        </tr>
        <tr>
            <td>选择地区</td>
            <td>
                <select class="select_none">
                    <option value="-请选择-">-请选择-</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                </select>
                <select class="select_none">
                    <option value="-请选择-">-请选择-</option>
                    <option value="海淀区">海淀区</option>
                    <option value="朝阳区">朝阳区</option>
                    <option value="大兴">大兴</option>
                    <option value="东城">东城</option>
                </select>
                <select class="select_none">
                    <option value="-请选择-">-请选择-</option>
                    <option value="潘家园">潘家园</option>
                    <option value="双井">双井</option>
                    <option value="国贸">国贸</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>详细地址</td>
            <td><input type="text" class="inputStyle" placeholder="详细地址"></td>
        </tr>
        <tr>
            <td>邮政编码</td>
            <td><input type="text" class="inputStyle" placeholder="邮政编码"></td>
        </tr>
        <tr>
            <td class="lastTd" colspan="2">
                <button class="saveBtn">保存</button>
            </td>
        </tr>
    </table>
</div>

<script src="js/zepto.min.js"></script>
<!--<script src="js/jquery-1.9.1.min.js"></script>-->
<script>
    $(".goods_detail").css("marginBottom",$(".goods").height());
    console.log($(".goods").height());
    var bH=window.screen.height, bW=window.screen.width;
    var bHh=document.body.scrollTop;
    var bhh=document.body.clientHeight;
    $(".add_buy").tap(function(){
        var bH=window.screen.height, bW=window.screen.width;
        var bHh=document.body.scrollTop;
        var bhh=document.body.clientHeight;
        $(".back").css({
            width:bW,
            height:bhh
        });
        $(".purchase").css("display","block");
    });
    $(".add_cart").tap(function(){
        var bH=window.screen.height, bW=window.screen.width;
        var bHh=document.body.scrollTop;
        var bhh=document.body.clientHeight;
        $(".back").css({
            width:bW,
            height:bhh
        });
        $(".address").css("display","block");
    });

    $(".add").tap(function(){
        var num=$(".num").val();
        $(".num")[0].value++;
    });
    $(".plus").tap(function(){
        if($(".num")[0].value<=0){
            $(".num")[0].value=0;
            return false;
        }
        $(".num")[0].value--;
    });
    $(".close").tap(function(){
        $(".back").css({
            width:0,
            height:0
        });
        $(".purchase").css("display","none");
    });
    $(".close_1").tap(function(){
        $(".back").css({
            width:0,
            height:0
        });
        $(".address").css("display","none");
    });
    $(".back").tap(function(){
        $(".back").css({
            width:0,
            height:0
        });
        $(".purchase").css("display","none");
        $(".address").css("display","none");
        $(".waitingPay").css("display","none");
    });
    $(".new_address").tap(function(){
        $(".address").css("display","none");
        $(".waitingPay").css("display","block");
    });
    $(".close_pay").tap(function(){
        $(".address").css("display","block");
        $(".waitingPay").css("display","none");
    });
    /*品种的选择*/
    $(".weight span").tap(function(){
        $(this).addClass("active_span");
        $(this).siblings().removeClass("active_span");
    });
    /*tab切换*/
    $(".details span").tap(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        if($(this).html()=="商品详情"){
            $(".details_any").css("display","block");
            $(".details_us").css("display","none");
        }else{
            $(".details_any").css("display","none");
            $(".details_us").css("display","block");
        }
    });
    $(".buy_button").tap(function(){
        window.location.href="shoppingCartInfo.html";
    });
    //选择种类
    $(".classify span").tap(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    });
    $(".years span").tap(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    });
</script>
</body>

</html>